<template >
	<div class="container">
		<div class="container-left"></div>
		<div class="container-right">
			<p class="right-title">订单管理ERP系统</p>
			
			<el-input
					style="width: 300px;margin-bottom: 25px"
					placeholder="请输入账号"
					v-model="loginData.loginName"
					prefix-icon="el-icon-user"
			>
			</el-input>
			<el-input
					style="width: 300px;margin-bottom: 25px"
					placeholder="请输入密码"
					show-password
					v-model="loginData.password"
					prefix-icon="el-icon-lock"
			>
			</el-input>
			
			<el-button style="width: 300px" type="primary" @click="getInHome">登 录</el-button>
		</div>
	
	</div>
</template >

<script >
	import { login } from "../api/userLogin";

    export default {
        name: "Login",
		data(){
            return{
				loginData:{
                    loginName:'',
                    password:''
				}
			}
		},
		methods:{
            async getInHome(){
                for (let key in this.loginData) {
                    if(!this.loginData[key]){
                        return this.$message.error('请将参数填写完整!!!')
                    }
                }
                const { data } = await login(this.loginData)
                console.log(data)
                if (data.code === 200) {
                    window.sessionStorage.setItem('token', data.data.tokenInfo.tokenValue)
                    window.sessionStorage.setItem('userInfo', JSON.stringify(data.data.admin))
                    await this.$router.push('/home')
                }
            }
		}
    }
</script >

<style scoped lang="less">
.container{
	width: 100%;
	height: 100%;
	background: url("../assets/images/banner.jpg") no-repeat;
	background-size: 100%, 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0 50px;
	box-sizing: border-box;
	.container-left {
		width: 650px;
		height: 650px;
		background: url("../assets/images/nice.png") no-repeat;
		background-size: 100%,100%;
	}
	.container-right {
		padding: 20px 40px;
		width: 400px;
		height: 300px;
		border: 1px solid #ccc;
		border-radius: 20px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		.right-title{
			width: 100%;
			text-align: center;
			font-size: 24px;
			color: #fff;
			font-weight: bold;
			margin-bottom: 20px;
			box-sizing: border-box;
		}
	}
}
</style >
